<template>
    <div id='finance-detail'>
       <!--  <h1 class="card-title">
           <span>放款详情</span>
       </h1> -->
        
        <div class="loading-min-height">
            <loading v-show='loading' mode='full'></loading>
            <transition name='fade'>
                <div class="result-info" v-if='!loading'>
                    <div class="detail-info">
                        <p>放款形式: <span>{{info.loanLendType || placeholder}}</span></p>
                    </div>
                    <div class="card-content">
                        <div class="sub-title"><span class='title'>借款基本信息</span></div>
                        <ul class="result-info__list">
                            <li class="result-info__item">
                                <div class="result-info__key">借款人姓名</div>
                                <div class="result-info__value">{{loanInfo.name || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">借款本金</div>
                                <div class="result-info__value">{{loanInfo.lendAmount | toYuan}} 元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">借款天数</div>
                                <div class="result-info__value">{{loanInfo.lendCycle || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">约定还款日</div>
                                <div class="result-info__value">{{loanInfo.needRepayTime || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">联系方式</div>
                                <div class="result-info__value">{{loanInfo.phone || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">收款账号</div>
                                <div class="result-info__value">{{loanInfo.cardName || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">服务费比例</div>
                                <div class="result-info__value">{{loanInfo.serviceCharge | toPercent}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">服务费金额</div>
                                <div class="result-info__value">{{loanInfo.serviceAmount | toYuan}} 元</div>
                            </li>
                        </ul>
                    </div>

                    <div class="card-content">
                        <div class="sub-title"><span class='title'>放款信息</span></div>
                        <ul class="result-info__list">
                            <li class="result-info__item">
                                <div class="result-info__key">借款人到账金额</div>
                                <div class="result-info__value">{{lendInfo.lendRealAmount | toYuan}} 元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">支付手续费</div>
                                <div class="result-info__value">{{lendInfo.serviceAmount | toYuan}} 元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">总计应支出</div>
                                <div class="result-info__value">{{lendInfo.lendRealAmount | toYuan}} 元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">放款时间</div>
                                <div class="result-info__value">{{lendInfo.lendTime || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">放款方式</div>
                                <div class="result-info__value">{{lendInfo.lendWay || placeholder}}</div>
                            </li>
                            <li class="result-info__item" v-if='lendInfo.underLineAccountNumber'>
                                <div class="result-info__key">线下放款账号</div>
                                <div class="result-info__value">{{lendInfo.underLineAccountNumber || placeholder}}</div>
                            </li>
                            <li class="result-info__item" v-if='lendInfo.underLineRemarks'>
                                <div class="result-info__key">线下放款备注</div>
                                <div class="result-info__value">{{lendInfo.underLineRemarks || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">状态</div>
                                <div class="result-info__value">{{lendInfo.lendStatus || placeholder}}</div>
                            </li>
                        </ul>
                    </div>

                    <div class="card-content">
                        <div class="sub-title"><span class='title'>逾期信息</span></div>
                        <ul class="result-info__list">
                            <li class="result-info__item">
                                <div class="result-info__key">逾期利率</div>
                                <div class="result-info__value">{{lendInfo.overDueCharge | toPercent}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">逾期天数</div>
                                <div class="result-info__value">{{lendInfo.overDueDays || placeholder}}</div>
                            </li>
                        </ul>
                    </div>

                    <div class="card-content">
                        <div class="sub-title"><span class='title'>还款信息</span></div>
                        <ul class="result-info__list">
                            <li class="result-info__item">
                                <div class="result-info__key">应还款总额</div>
                                <div class="result-info__value">{{repayInfo.needRepayTotalAmount | toYuan}}元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">应还本金</div>
                                <div class="result-info__value">{{repayInfo.needRepayAmount | toYuan}} 元</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">逾期利息</div>
                                <div class="result-info__value">{{repayInfo.overDueAmount | toYuan}} 元</div>
                            </li>
                            <!-- <li class="result-info__item">
                                <div class="result-info__key">支付手续费</div>
                                <div class="result-info__value">{{repayInfo.phone || placeholder}}</div>
                            </li> -->
                            <li class="result-info__item">
                                <div class="result-info__key">还款时间</div>
                                <div class="result-info__value">{{repayInfo.repayTime || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">还款账号</div>
                                <div class="result-info__value">{{repayInfo.cardName || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">状态</div>
                                <div class="result-info__value">{{repayInfo.repayStatus || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">约定还款日</div>
                                <div class="result-info__value">{{repayInfo.needRepayTime || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">展期次数</div>
                                <div class="result-info__value">{{repayInfo.extendTimes || placeholder}}</div>
                            </li>
                            <li class="result-info__item full" v-if='repayInfo.repayPartRemarks'>
                                <div class="result-info__key">部分结清备注</div>
                                <div class="result-info__value">
                                    <p v-for='(item,index) in repayInfo.repayPartRemarks'>
                                        {{index + 1}}.{{item || placeholder}}
                                    </p>
                                </div>
                            </li>
                            <li class="result-info__item full">
                                <div class="result-info__key">剩余金额</div>
                                <div class="result-info__value">{{repayInfo.surplusNeedRepayAmount | toYuan}}元</div>
                            </li>
                        </ul>
                    </div>

                    <div class="card-content">
                        <div class="sub-title">
                            <span class="title">通讯录信息</span>
                        </div>
                        <div class='loading-min-height'>
                            <loading v-show='loading_contact' mode='full'></loading>
                            <p class='no-data' v-if='!loading_contact && !records.length'>暂无数据</p>
                            <div class="table-list" v-if='records.length'>
                                <table>
                                    <thead class="table-list__head">
                                        <tr>
                                            <th>通讯录号码</th>
                                            <th>通讯录名字</th>
                                            <th>通话次数</th>
                                            <th>通话时长</th>
                                            <th>主叫次数</th>
                                            <th>主叫时长</th>
                                            <th>被叫次数</th>
                                            <th>被叫时长</th>
                                        </tr>
                                    </thead>
                                    <tbody class='table-list__body have-border'>
                                        <tr v-for='item in records'>
                                            <td>{{ item.mobile || placeholder }}</td>
                                            <td>{{ item.contactName || placeholder }}</td>
                                            <td>{{ item.talk_count || placeholder }}</td>
                                            <td>{{ item.talk_seconds | secondFormat }}</td>
                                            <td>{{ item.call_count || placeholder }}</td>
                                            <td>{{ item.call_seconds | secondFormat }}</td>
                                            <td>{{ item.called_count || placeholder }}</td>
                                            <td>{{ item.called_seconds | secondFormat }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <pagination
                                    :current-page='listInfo.pageNum'
                                    :total-page='listInfo.totalPage'
                                    @pageChange='getContactList'></pagination>
                            </div>
                        </div>
                    </div>

                    <div class="card-content">
                        <div class="sub-title"><span class='title'>关联记录</span></div>
                        <ul class="result-info__list">
                            <li class="result-info__item">
                                <div class="result-info__key">认证审核</div>
                                <div class="result-info__value">{{info.report && info.report.authCheckOperator || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">通过审核</div>
                                <div class="result-info__value">{{info.report && info.report.authCheckTime || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">借款申请</div>
                                <div class="result-info__value">{{info.report && info.report.loanCheckOperator || placeholder}}</div>
                            </li>
                            <li class="result-info__item">
                                <div class="result-info__key">通过审核</div>
                                <div class="result-info__value">{{info.report && info.report.loanCheckTime || placeholder}}</div>
                            </li>
                        </ul>
                    </div>
            
                    <div class="footer-button" v-if='info.status == "WAITCHECK"'>
                        <div class="button mid success" @click='show_modal_confirm_manual = true'>手工已放款</div>
                        <div class="button mid success" @click='show_modal_confirm = true'>同意放款</div>
                        <div class="button mid success" @click='show_modal_reject = true'>拒绝放款</div>
                        <div class="button mid success" @click='show_modal_modify = true'>修改金额</div>
                    </div>

                    <div class="footer-button" v-if='repayInfo.repayStatus == "待还款"'>
                        <!-- <div class="button mid warn">失败</div> -->
                        <div class="button mid success" @click='show_modal_extend = true'>展期</div>
                        <div class="button mid success" @click='showAllModal' v-show="true">全部结清</div>
                        <div class="button mid success" @click='showPartModal' :class='{disabled:repayInfo.extendTimes < 0}' >部分结清</div>
                    </div>
                </div>
            </transition>
        </div>

        <modal  
            class='modal-confirm-finance'
            :show='show_modal_confirm' 
            title='确认放款'
            :loading='loading_confirm'
            @confirm='confirmHandle'
            @close='show_modal_confirm=false'>
            <div class="money">{{lendInfo.lendRealAmount | toYuan}} 元</div>
            <div class="lend">即将支出</div>
            <div class="tips">确认后将直接划账，此操作无法撤回</div>
        </modal>

        <modal  
            :show='show_modal_confirm_manual' 
            title='手工已放款'
            :loading='loading_confirm'
            @confirm='confirmManual'
            @close='show_modal_confirm_manual=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">放款账号</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入放款账号" v-model='account'>
                        </div>
                    </li>
                </ul>
                <textarea class='modal__textarea' rows="5" placeholder="请输入放款备注" v-model='remarksUnderline'></textarea>
            </div>
        </modal>

        <modal  
            :show='show_modal_modify' 
            title='修改金额'
            :loading='loading_confirm'
            @confirm='modifyHandle'
            @close='show_modal_modify=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">金额</span>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入金额" v-model='modifyAmount'>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal  
            :show='show_modal_reject' 
            title='拒绝放款'
            :loading='loading_confirm'
            @confirm='rejectHandle'
            @close='show_modal_reject=false'>
            <div class="modal-form-wrap">
                <textarea class='modal__textarea' rows="5" placeholder="请输入拒绝原因" v-model='rejectReason'></textarea>
            </div>
        </modal>

        <modal  
            :show='show_modal_extend' 
            title='展期确定'
            :loading='loading_confirm'
            @confirm='confirmExtend'
            @close='show_modal_extend=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">申请人</span>
                        <div class="form-item__value">
                            <p class="item">{{loanInfo.name || placeholder}} {{loanInfo.phone || placeholder}}</p>
                        </div>
                    </li>
                    <!-- <li class='form-item'>
                        <span class="form-item__key">展期期数</span>
                        <div class="form-item__value">
                            <input type="text" v-model='extendTimes' @input='confirmExtendAmount' :placeholder="'最高 '+report.onceExtendTimes+' 期'">
                        </div>
                    </li> -->
                    <li class='form-item'>
                        <span class="form-item__key">展期单期天数</span>
                        <div class="form-item__value">
                            <input type="text" v-model='extendDays' @input='confirmExtendAmount' :placeholder="'最高 '+report.extendDays+' 天'">
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">展期费用</span>
                        <div class="form-item__value">
                            <p class="item">{{extendAmount | toYuan}}元</p>
                        </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal  
            :show='show_modal_all_repay' 
            title='全部结清'
            :loading='loading_confirm'
            @confirm='confirmRepay'
            @close='show_modal_all_repay=false'>
            <div class="modal-form-wrap">
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">应还款（元）</span>
                        <div class="form-item__value">
                                <p class="item">{{ this.allRepayAmount| toYuan}}元</p>
                                <!--  {repayInfo.surplusNeedRepayAmount-->
                        </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">减免金额</span>
                         <div class="inp">
                             <el-input  placeholder="输入金额" v-model="priceNum"></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">还款时间</span>
                        <div class="form-item__value">
                            <el-date-picker
                              clearable
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-model="time"
                              @change="allRepayFn"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </li>
                     <li class='form-item'>
                        <span class="form-item__key">还款方式</span>
                         <div class="inp">
                            <el-select v-model="selectValue" placeholder="请选择">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                         </div>
                    </li>
                </ul>
            </div>
        </modal>

        <modal  
            :show='show_modal_part_repay' 
            title='部分结清'
            :loading='loading_confirm'
            @confirm='confirmRepayPart'
            @close='show_modal_part_repay=false'>
            <div class="modal-form-wrap">
               <!--  <ul class='modal-form'>
                   <li class='form-item'>
                       <span class="form-item__key">本次部分还款金额</span>
                       <div class="form-item__value">
                           <input type="text" placeholder="请输入金额" v-model='amount'>
                       </div>
                   </li>
                   <li class='form-item'>
                       <span class="form-item__key">还款时间</span>
                       <div class="form-item__value itemwidth">
                           <picker-date time picker-id='startDate' key='startDate' placeholder='请选择开始时间' v-model='startTime'></picker-date>
                       </div>
                   </li>
               </ul>-->
               
                <ul class='modal-form'>
                    <li class='form-item'>
                        <span class="form-item__key">应还款（元）</span>
                        <div class="inp">
                             <el-input  placeholder="输入金额" v-model="amount"></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">减免金额</span>
                         <div class="inp">
                             <el-input  placeholder="输入金额" v-model="priceNumOther"></el-input>
                         </div>
                    </li>
                    <li class='form-item'>
                        <span class="form-item__key">还款时间</span>
                        <div class="form-item__value">
                            <el-date-picker
                              clearable
                              value-format="yyyy-MM-dd HH:mm:ss"
                              v-model="time1"
                              type="datetime"
                              placeholder="选择日期时间">
                            </el-date-picker>
                        </div>
                    </li>
                     <li class='form-item'>
                        <span class="form-item__key">还款方式</span>
                         <div class="inp">
                            <el-select v-model="selectValue1" placeholder="请选择">
                                <el-option
                                  v-for="item in options"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                         </div>
                    </li>
                </ul>
                <textarea class='modal__textarea' rows="5" placeholder="请输入部分结清备注" v-model='remarks'></textarea> 
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import toPercent from '../filters/filter-toPercent'
    import  { mapGetters, mapActions }  from 'vuex'
    import { authApplyDetailValidation } from '../validation/validation'
    import { loanApi, financeApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            toPercent,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                listInfo:{},
                records:[],
                loading_contact:false,
                id:this.$route.params.id,
                extendDays:'',
                extendTimes:'',
                placeholder:'--',
                extendAmount:'',
                startTime:'',
                show_modal_confirm:false,
                show_modal_reject:false,
                show_modal_modify:false,
                show_modal_all_repay:false,
                show_modal_confirm_manual:false,
                show_modal_part_repay:false,
                show_modal_extend:false,
                loading_reject:false,
                loading_confirm:false,
                loading:false,
                recommend:0,
                amount:'',
                modifyAmount:'',
                account:'',
                curItem:{},
                info:{},
                time:'',
                remarks:'',
                remarksUnderline:'',
                rejectReason:'',
                value1:"",
                options: [{
                  value: '1',
                  label: '支付宝还款'
                }, {
                  value: '2',
                  label: '银行卡还款'
                }, {
                  value: '3',
                  label: '其他还款'
                }],
                selectValue:"2",
                priceNum:"",
                priceNumOther:"",
                selectValue1:"2",
                time1:"",
                allRepayAmount:"",
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            report(){
                return this.info.report || {}
            },
            loanInfo(){
                return this.info.report && this.info.report.loanInfo || {}
            },
            repayInfo(){
                return this.info.report && this.info.report.repayInfo || {}
            },
            lendInfo(){
                return this.info.report && this.info.report.lendInfo || {}
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            getContactList(num = 1){
                this.loading_contact = true
                financeApi.getContact({
                    id:this.id,
                    pageSize:10,
                    pageIndex:num,
                })
                .then(result=>{
                    this.listInfo = result
                    this.records = result.records || []
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                    this.loading_contact = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_contact = false
                })
            },
            getInfo(){
                this.loading = true
                financeApi.detail({
                    id:this.id
                })
                .then(result=>{
                    this.info = result
                    if(this.info.report && this.info.report.loanInfo){
                        this.account = this.info.report.loanInfo.underLinePayNo
                    }
                    this.loading = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            showAllModal(){
                this.show_modal_all_repay=true;
                this.time=moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                this.lendUpdateRepayTimeFn()
            },
            showPartModal(){
                this.amount = ''
                this.priceNumOther=""
                this.remarks = ''
                this.time1=null
                this.show_modal_part_repay = true
            },
            allRepayFn(){
                this.lendUpdateRepayTimeFn()
            },
            lendUpdateRepayTimeFn(){
                
                var msg={
                    repayTime:this.time,
                    id:this.id,
                }
                financeApi.lendUpdateRepayTime(msg)
                .then(result=>{
                    this.allRepayAmount=result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            confirmHandle(){
                this.loading_confirm = true
                financeApi.pass({
                    id:this.id,
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_confirm = false
                    this.setMsgTip({
                        text:'放款成功',
                        type:'success'
                    })
                    this.$router.back()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            modifyHandle(){
                this.loading_confirm = true
                financeApi.modAmount({
                    id:this.id,
                    amount:this.modifyAmount * 100
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_modify = false
                    this.setMsgTip({
                        text:'修改金额成功',
                        type:'success'
                    })
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            rejectHandle(){
                this.loading_confirm = true
                financeApi.reject({
                    id:this.id,
                    msg:this.rejectReason
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_reject = false
                    this.setMsgTip({
                        text:'拒绝成功',
                        type:'success'
                    })
                    this.$router.back()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            confirmManual(){
                this.loading_confirm = true
                financeApi.underLinePay({
                    id:this.id,
                    remarks:this.remarksUnderline,
                    accountNumber:this.account
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_confirm = false
                    this.setMsgTip({
                        text:'放款成功',
                        type:'warn'
                    })
                    this.$router.back()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            confirmRepay(){

                this.loading_confirm = true
                financeApi.repay({
                    id:this.id,
                    repayTime:this.time,
                    remissionAmount:this.priceNum,
                    repayType:this.selectValue
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_all_repay = false
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            confirmExtend(){
                this.loading_confirm = true
                financeApi.extendTime({
                    id:this.id,
                    extendDays:this.extendDays,
                    extendTimes:this.extendTimes,
                    extendAmount:this.extendAmount
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_extend = false
                    this.extendDays = ''
                    this.extendAmount = ''
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            },
            confirmExtendAmount(){
                if(this.extendDays){
                    this.loading_confirm_amount = true
                    financeApi.confirmExtendAmount({
                        id:this.id,
                        extendDays:this.extendDays,
                        extendTimes:this.extendTimes,
                    })
                    .then(result=>{
                        this.loading_confirm_amount = false
                        this.extendAmount = result.confirmExtendAmount
                    })
                    .catch(error => {
                        console.error(error)
                        this.loading_confirm_amount = false
                    }) 
                }
            },
            confirmRepayPart(){
                this.loading_confirm = true
                financeApi.addRepayPartRemarks({
                    id:this.id,
                    repayTime:this.time1,
                    remarks:this.remarks,
                    partAmount:this.amount,
                    remissionAmount:this.priceNumOther,
                    repayType:this.selectValue1
                })
                .then(result=>{
                    this.loading_confirm = false
                    this.show_modal_part_repay = false
                    this.getInfo()
                })
                .catch(error => {
                    console.error(error)
                    this.loading_confirm = false
                })
            }
        },
        created(){
            this.getInfo()
            this.getContactList()
        }
    }
</script>
<style>
    .el-input__icon {
        line-height:34px;
    }
    #finance-detail .el-input--prefix .el-input__inner{
        padding-left:38px;
    }
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .inp{
        float: right;
    }
    .el-select{
        width:202px!important;
    }
    .el-date-editor.el-input,.el-date-editor.el-input__inner{
        width:202px;
    }
    #finance-detail{
        .detail-info{
            font-size: 14px;
            line-height: 1.5;
            padding-top:10px;
            color:$importColor;
            p{
                padding-top: 10px;
            }
            span{
                font-weight: normal;
            }
        }
        .footer-button{
            padding-top: 50px;
            display: flex;
            justify-content: center;
            .button{
                margin:0 20px;
            }
        }
        .modal-confirm-finance{
            text-align: center;
            .money{
                font-size: 35px;
                font-weight: normal;
                line-height: 1.5;
                color:$red;
            }
            .lend{
                @extend %font-body1;
                padding-top: 8px;
                color:$importColor;
            }
            .tips{
                @extend %font-input;
                padding-top: 30px;
            }
        }
    }
</style>
